<template>
    <div class="playMusic">
        <!-- 背景图片 -->
        <div class="bg" :style="{backgroundImage: `url(${playDetail.al.picUrl})`}"></div>
        <!-- 底部 -->
        <div class="playTop">
            <!-- 左边 -->
            <div class="back" @click="$emit('back')">
                <!-- 返回按钮 -->
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-zuojiantou"></use>
                </svg>
            </div>
            <!-- 中间 -->
            <div class="center">
                <div class="title">
                    <marquee behavior="score" direction="left">{{playDetail.al.name}}</marquee>
                </div>
            </div>
            <!-- 右边分享 -->
            <div class="share">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-fenxiang"></use>
                </svg>
            </div>
        </div>
        <div class="playContent" v-show="!isLyric">
            <img class="needle" :class="{ active:!paused }" src="@/assets/needle-ab.png" alt="">
            <img class="disc" src="@/assets/disc.png" alt="">
            <img class="playImg" :src="playDetail.al.picUrl" alt="">
        </div>
        <!-- 歌词 -->
        <div class="playLyric" v-show="isLyric" ref="playLyric">
            <!-- {{$store.state.lyric}} -->
            <p :class="{active:(currentTime*1000>=item.pre&&currentTime*1000<item.time)}" v-for="(item,i) in $store.getters.lyricList" :key="i">
                {{item.lyric}}
            </p>
        </div>
        <!-- 进度条 -->
        <div class="progress"></div>
        <!-- 底部 -->
        <div class="playFooter">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-a24gl-repeat2"></use>
            </svg>
            <svg class="icon" aria-hidden="true" @click="goPlay(-1)">
                <use xlink:href="#icon-a24gl-next"></use>
            </svg>
            <svg v-if="paused" class="icon play" aria-hidden="true" @click="play">
                <use xlink:href="#icon-a24gl-play"></use>
            </svg>
            <svg v-else class="icon play" aria-hidden="true" @click="play">
                <use xlink:href="#icon-zanting"></use>
            </svg>
            <svg class="icon" aria-hidden="true"  @click="goPlay(1)">
                <use xlink:href="#icon-a24gl-previous"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-liebiao"></use>
            </svg>
        </div>
    </div>
</template>
<script>
import {mapState} from 'vuex'
    export default {
        props:['playDetail','paused','play'],
        data:function(){
            return{
                isLyric:true
            }
        },
        // 计算属性
        computed:{
            ...mapState(['lyric','currentTime','playlist']),
        },
        // 监听
        watch:{
            currentTime:function(newValue){
                // console.log(newValue)
                // console.log([this.$refs.playLyric])
                let p = document.querySelector('p.active')
                let offsetTop = p.offsetTop

                // 获取元素的高度
                // let h = this.$refs.playLyric.offsetHeight
                // if( offsetTop > h ){
                //     this.$refs.playLyric.scrollTop = this.$refs.playLyric.scrollTop + (offsetTop-h/2)
                // }
                this.$refs.playLyric.scrollTop = p.offsetTop
                // console.log([p])
            }
        },
        methods:{
            goPlay(num){
                let index = this.playCurrentIndex+num
                if(index<0){
                    index = this.playlist.length-1
                }else if(index == this.playlist.length){
                    index = 0
                }
                this.$store.commit('setPlayIndex')
            }
        }
    }
</script>

<style lang="less" scoped>
    .playMusic{
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        background-color: #fff;
        z-index: 100;
        .bg{
            position: absolute;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
            background-size: auto 100%;
            filter: blur(60px);
            background-position: center;
        }
        .playTop{
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 7.5rem;
            height: 1.2rem;
            position: absolute;
            left: 0;
            top: 0;
            color: #fff;
            padding: 0 0.4rem;
            .icon{
                fill: #fff;
                width: 0.6rem;
                height: 0.6rem;
            }
            marquee{
                width: 5rem;
                flex: 1;
                font-size: 20px;
            }
        }
        .playContent{
            position: absolute;
            width: 7.5rem;
            height: 7.5rem;
            left: 0;
            top: 1.5rem;
            .needle{
                width: 2.5rem;
                height: auto;
                position: absolute;
                left: 3.5rem;
                transform-origin: 0.3rem 0;
                transform: rotate(-10deg);
                z-index: 10;
                transition: 1s all;
            }
            .needle.active{
                width: 2.5rem;
                height: auto;
                position: absolute;
                left: 3.5rem;
                transform-origin: 0.3rem 0;
                transform: rotate(15deg);
                z-index: 10;
                transition: 1s all;
            }
            .disc{
                width: 5.5rem;
                height: auto;
                position: absolute;
                left: calc(50% - 2.75rem);
                top: 1.8rem;
            }
            .playImg{
                width: 3.36rem;
                height: 3.34rem;
                border-radius: 1.5rem;
                position: absolute;
                left: calc(50% - 1.7rem);
                top: 2.88rem;
            }
        }
        .playFooter{
            width: 7.5rem;
            height: 1.5rem;
            position: absolute;
            left: 0;
            bottom: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 0.4rem;
            .icon{
                fill: #fff;
                width: 0.5rem;
                height: 0.5rem;
            }
            .play.icon{
                width: 0.7rem;
                height: 0.7rem;
            }
        }
        .playLyric{
            position: absolute;
            width: 7.5rem;
            height: 8rem;
            left: 0;
            top: calc(50% - 4rem);
            overflow: scroll;
            text-align: center;
            color: white;
            padding: 0.3rem 0;
            .active{
                color: red;
            }
        }
    }
</style>
